import React from "react";
type Istate = {
    content: string;
    isVip: boolean;
}
class Clipboard extends React.Component<any, Istate>{
    constructor(props: any) {
        super(props)
        this.state = {
            content: '',
            isVip: false
        }
    }
    handleClick = (e: React.MouseEvent) => {
        console.log(e.nativeEvent); //获取dom原生的event事件
    }
    handleKeyDown = (e: React.ClipboardEvent) => {
        console.log(e.nativeEvent)
    }

    // 复制
    handleCopy = () => {
        if (!this.state.isVip) {
            alert('您还没有该权限哦')
            return
        }
        // /获取被选中的内容
        let sel: string | undefined = window.getSelection()?.toString();
        console.log(sel)
        // 写入到剪贴板
        navigator.clipboard?.writeText(sel!)
    }

    // 粘贴
    handlePaste = () => {
        if (!this.state.isVip) {
            alert('您还没有该权限哦')
            return
        }
        // 从剪贴板读取
        navigator.clipboard.readText()
            .then((text: string) => {
                console.log(text)
                this.setState({ content: text })
            })
    }

    componentDidMount(): void {
        document.onkeydown = function (e: Event) {
            e.preventDefault()
        }

        // 静止右键
        document.oncontextmenu=function(e:Event){
            e.preventDefault()
        }
    }

    // 充值vip
    handleCharge = () => {
        this.setState({
            isVip:true
        })
        alert('您可以使用您的新权限啦！')
    }

    render(): React.ReactNode {
        return (
            <fieldset>
                <legend>剪贴板事件</legend>
                <button onClick={this.handleClick}>点击</button>

                {/* 剪贴板剪切事件：onCut */}
                {/* <input type="text" onCut={this.handleKeyDown} /> */}

                {/* 剪贴板复制事件：onCopy */}
                {/* <input type="text" onCopy={this.handleKeyDown} /> */}

                {/* 剪贴板复制事件：onPaste */}
                <input type="text" onPaste={this.handleKeyDown} />

                <p>人生有很多的转折,每一个时段有每一个时段的颜色。所谓最难忘的,就是从来都不曾想起,却永远无法忘记。</p>
                <div contentEditable suppressContentEditableWarning={true} className="content" style={{ minHeight: '50px', border: '1px solid #ccc' }}>{this.state.content}</div>

                <button onClick={this.handleCopy}>复制</button>
                <button onClick={this.handlePaste}>粘贴</button><br />
                <button style={{ backgroundColor: 'hotpink', color: '#fff' }} onClick={this.handleCharge}>充值vip</button>
                <button onClick={()=>{
                    this.setState({
                        isVip:false
                    })
                }}>退订vip</button>
            </fieldset>
        )
    }
}
export default Clipboard